<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>老师后台-学的通</title>
    <style>
        .container {
            min-height: 100vh;
        }

        /*.container .leftmenu {
            height: 100vh;
            background-color: #fff;
        }*/

        .link-secondary {
            text-decoration: none;
        }

        .link-secondary:hover {
            color: #0d6efd !important;
        }

        .v:hover {
            cursor: pointer;
        }

        .card-body .btn-success {
            display: none;
        }

        .card-body:hover .btn-success {
            display: block;
        }

        .card-body .btn-danger {
            display: none;
        }

        .card-body:hover .btn-danger {
            display: block;
        }
    </style>
</head>

<body>
    <!-- container是bootstrap的居中显示方案 -->
    <div class="container bg-body-secondary">
        <div class="row">
            <div class="col-md-2 leftmenu" id="leftmenu"></div>
            <div class="col-md-9 kc ms-3">
                <div class="row mt-3">
                    <!-- row似乎不能同时使用flex布局  -->
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link nav-tab active" aria-current="page" href="#">我教的课程</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link nav-tab" href="#">我学的课程</a>
                        </li>
                        <li class="nav-item">
                            <select class="form-select" aria-label="select example">
                                <option selected value="-1">请选择学期</option>
                                <option value="0">2022-2023第二学期</option>
                                <option value="1">2022-2023第一学期</option>
                                <option value="2">2021-2022第二学期</option>
                                <option value="3">2021-2022第一学期</option>
                            </select>
                        </li>
                        <li class="nav-item ms-5" style="position: relative;">
                            <input type="text" class="form-control rounded-pill" placeholder="请输入课程名称">
                            <i class="bi bi-search" style="position: absolute; right: 1rem; top: 0.7rem;"></i>
                        </li>
                        <li class="nav-item ms-5">
                            <a class="nav-link link-success" href="#">
                                <i class="bi bi-plus-circle-fill"></i>
                                创建文件夹
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class=" nav-link link-success" href="./createcourse.html">
                                <i class="bi bi-plus-circle-fill"></i>
                                创建课程
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="row" id="tbody">
                     <!-- <div class="card m-3" style="width: 18rem;"> 
                        <img src="../img/web1.png" width="262px" height="180px" class="card-img-top mt-2" alt="web前端">
                        <div class="card-body">
                            <h5 class="card-title">web前端开发基础1</h5>
                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>
                            <h6 class="mt-1 text-muted">课程号:mb-001</h6>
                            <h6 class="mt-1 text-muted">教师:番薯</h6>
                            <h6 class="mt-1 text-muted d-flex justify-content-between">
                                <div>22级移动应用开发</div>
                                <div>17 <i class="bi bi-chevron-right"></i></div>
                            </h6>
                        </div>
                    </div>
                    <div class="card m-3" style="width: 18rem;">
                        <img src="../img/w.png" width="262px" height="180px" class="card-img-top mt-2" alt="web前端">
                        <div class="card-body">
                            <h5 class="card-title">web前端开发基础2</h5>
                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>
                            <h6 class="mt-1 text-muted">课程号:mb-110</h6>
                            <h6 class="mt-1 text-muted">教师:红薯</h6>
                            <h6 class="mt-1 text-muted d-flex justify-content-between">
                                <div>22级移动应用开发</div>
                                <div>17 <i class="bi bi-chevron-right"></i></div>
                            </h6>
                        </div>
                    </div>
                    <div class="card m-3" style="width: 18rem;">
                        <img src="../img/web.webp" width="262px" height="180px" class="card-img-top mt-2" alt="web前端">
                        <div class="card-body">
                            <h5 class="card-title">web前端开发基础3</h5>
                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>
                            <h6 class="mt-1 text-muted">课程号:mb-100</h6>
                            <h6 class="mt-1 text-muted">教师:土豆</h6>
                            <h6 class="mt-1 text-muted d-flex justify-content-between">
                                <div>22级移动应用开发</div>
                                <div>17 <i class="bi bi-chevron-right"></i></div>
                            </h6>
                        </div>
                    </div>
                    <div class="card m-3" style="width: 18rem;">
                        <img src="../img/qd.webp" width="262px" height="180px" class="card-img-top mt-2" alt="web前端">
                        <div class="card-body">
                            <h5 class="card-title">web前端开发基础4</h5>
                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>
                            <h6 class="mt-1 text-muted">课程号:mb-000</h6>
                            <h6 class="mt-1 text-muted">教师:马铃薯</h6>
                            <h6 class="mt-1 text-muted d-flex justify-content-between">
                                <div>22级移动应用开发</div>
                                <div>17 <i class="bi bi-chevron-right"></i></div>
                            </h6>
                        </div>
                    </div>
                    <div class="card m-3" style="width: 18rem;">
                        <img src="../img/前端.webp" width="262px" height="180px" class="card-img-top mt-2" alt="web前端">
                        <div class="card-body">
                            <h5 class="card-title">web前端开发基础5</h5>
                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>
                            <h6 class="mt-1 text-muted">课程号:mb-101</h6>
                            <h6 class="mt-1 text-muted">教师:五花肉</h6>
                            <h6 class="mt-1 text-muted d-flex justify-content-between">
                                <div>22级移动应用开发</div>
                                <div>17 <i class="bi bi-chevron-right"></i></div>
                                <button class="btn btn-sm btn-success">编辑</button>
                                <button class="btn btn-sm btn-danger">删除</button>
                            </h6>
                        </div>
                    </div>
                    <div class="card m-3" style="width: 18rem;">
                        <img src="../img/web0.webp" width="262px" height="180px" class="card-img-top mt-2" alt="web前端">
                        <div class="card-body">
                            <h5 class="card-title">web前端开发基础6</h5>
                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>
                            <h6 class="mt-1 text-muted">课程号:mb-010</h6>
                            <h6 class="mt-1 text-muted">教师:柯基</h6>
                            <h6 class="mt-1 text-muted d-flex justify-content-between">
                                <div>22级移动应用开发</div>
                                <div>17 <i class="bi bi-chevron-right"></i></div>                                
                                <button class="btn btn-sm btn-success">编辑</button>
                                <button class="btn btn-sm btn-danger">删除</button>
                            </h6>
                        </div>
                    </div>
                </div> -->
                <div class="card m-3" style="width: 18rem;">
                    <img src="../img/web0.webp" width="262px" height="180px" class="card-img-top mt-2" alt="web前端">
                    <div class="card-body">
                        <h5 class="card-title">jquery</h5>
                        <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>
                        <h6 class="mt-1 text-muted">课程号:mb-089</h6>
                        <h6 class="mt-1 text-muted">教师:柯基</h6>
                        <h6 class="mt-1 text-muted d-flex justify-content-between">
                            <div>22级移动应用开发</div>
                            <div>17 <i class="bi bi-chevron-right"></i></div>                                
                            <button class="btn btn-sm btn-success">编辑</button>
                            <button class="btn btn-sm btn-danger">删除</button>
                        </h6>
                    </div>
                </div>
                <div class="card m-3" style="width: 18rem;">
                    <img src="../img/web0.webp" width="262px" height="180px" class="card-img-top mt-2" alt="web前端">
                    <div class="card-body">
                        <h5 class="card-title">web前端开发基础6</h5>
                        <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>
                        <h6 class="mt-1 text-muted">课程号:mb-033</h6>
                        <h6 class="mt-1 text-muted">教师:小柯基</h6>
                        <h6 class="mt-1 text-muted d-flex justify-content-between">
                            <div>22级移动应用开发</div>
                            <div>17 <i class="bi bi-chevron-right"></i></div>                                
                            <button class="btn btn-sm btn-success">编辑</button>
                            <button class="btn btn-sm btn-danger">删除</button>
                        </h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="d-grid gap-2 col-1 mx-auto position-absolute bottom-0 end-0 ">
        <button class="btn btn-primary text-bg-light p-3 form-control rounded-pill" type="button">
            <i class="bi bi-volume-up"></i>
            更新公告
            <a class="link-secondary" href="#"></a>
        </button>
        <button class="btn btn-primary text-bg-light p-3 form-control rounded-pill" type="button">
            <i class="bi bi-question-circle-fill"></i>
            使用帮助
        </button>
        <button class="btn btn-primary text-bg-light p-3 form-control rounded-pill" type="button">
            <i class="bi bi-headset"></i>
            在线客服
        </button>
        <button class="btn btn-primary text-bg-light p-3 form-control rounded-pill" type="button">
            <i class="bi bi-chevron-bar-up"></i>
            回到顶部
        </button>
    </div>
    <script type="module" src="../js/main.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/common.js"></script>
    <script>

        $(document).ready(function () {
            //当用户点击class是nav-tab的标签(添加之前删除所有active类)添加active类
            $(".nav-tab").click(function (e) {
                //删除nav-tab所有的active类
                $(".nav-tab").removeClass("active");
                //给点击的标签添加active类
                $(this).addClass("active");
            })
            $.get(" https://unicloud.codecore.cn/ms/courseAll?teacher_id=645484f2819ce8deeea2a59b", {}, function (params) {
                if (params.errCode == 0) {
                    for (let i = 0; i < params.data.length; i++) {
                        const elem = params.data[i]
                        $("#tbody").append($(`<div class="card m-3" style="width: 18rem;">
                        <img src="../imgs/view.jpg" width=262 height=180 class="card-img-top mt-3" alt="web前端">
                        <div class="card-body">
                            <h5 class="card-title">研究开发</h5>
                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>
                            <h6 class="mt-1 text-muted">课程号:mb-099</h6>
                            <h6 class="mt-1 text-muted">教师:尹双义</h6>
                            <h6 class="mt-1 text-muted d-flex justify-content-between">
                                <div>22级移动应用开发</div>
                                <div>17<i class="bi bi-chevron-right"></i></div>
                                <button class="btn btn-sm btn-success">编辑</button>
                                <button class="btn btn-sm btn-danger">删除</button>
                        </div>`))
                    }
                }
            }
            )
            $.post("http://unicloud.codecore.cn/ms/courseRemove", data, function (params) {
                let data = $(this).data()
                console.log(params);
                if (params.errCode == 0) {
                    location.reload()
                } else
                    alert("删除异常")
            })
        });
        $("#tbody").delegate("button.btn-danger", "click", function () {
            console.log($(this).data());
            let data = $(this).data();
            $.post("https://unicloud.codecore.cn/ms/studentRemove", data, function (params) {
                console.log(params);
            })
        });
        $("#tbody").delegate("button.btn-success", "click", function () {
            let data = $(this).data();
            location.href = ` ./edit_student.html?id=${data.id}`
        });
    </script>
</body>

</html>